import React from 'react'
import { List, InputItem, WhiteSpace, Picker, DatePicker, TextareaItem, Switch, Button, Flex, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'

import { post } from '../../../axios'
import history from '../../../history'
import moment from 'moment'
import utils from '../../../common/utils'
import CustomImagePicker from '../../../components/image-picker'

class NewMsg extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hasError: false,
      files: [],
      to_user_id: undefined
    }
  }

  componentDidMount() {
    let to_user_id = this.props.match.params.to_user_id
    this.setState({to_user_id})
  }

  submit = () => {
    this.props.form.validateFields((errors, value) => {
      let imgs = this.state.files.map(x => x.uri)
        value.resource = imgs
        console.log(errors,value, )
        if (errors) {
          this.setState({hasError: true})
        } else {
         
          this.post_data({...value, to_user_id: this.state.to_user_id})
        }
    });
  }

  post_data = (data) => {
    post(`mem/links`, data).then(
        resp => {
            if (resp.success) {
                Toast.success('留言成功')
                history.go(-1)
            } else {
                Toast.fail(resp.msg)
            }
        }
    )
  }

  render() {
      const { getFieldProps, getFieldError } = this.props.form,
        {files, hasError} = this.state

      return (
        <div className='form-div'>
            <List> 
                <TextareaItem
                {...getFieldProps('content',
                    {rules: [{required: true, message: '必须填写'}]}
                )}
                title="留言信息"
                rows={8}
                count={500}
                />
                {getFieldError('content')&&hasError?<div className='err-msg'>{getFieldError('content')}</div>: null }              
            </List>
            <WhiteSpace/>
            
            <List >    
          
              <CustomImagePicker 
                  files={files} 
                  callback={(files, type, index) => this.setState({files})}
              />
              
            </List>
            <WhiteSpace/>
            <div className="btns">
                <a className="contact" onClick={()=>this.submit()}>提交</a>
            </div>
        </div>
      
      )
  }
}

export default createForm()(NewMsg)